<template>
<div>
	<div class="smp-search">
		<el-form :inline="false" label-width="100px" size="mini" ref="form" :model="form">
			
			<el-row>
				<el-col :span="24">
						<el-col :span="8">
							<el-form-item label="需求编号:" >
								<el-input v-model="query.body.qmsNo"></el-input>
							</el-form-item>
						</el-col>
						
				
						
						
					<!-- 	<el-col :span="8">
						  <el-form-item label="需求类型:" >
						  	<el-select v-model="query.body.qmsType" style="width: 100%" placeholder="需求类型" >
						  		<el-option v-for="item in dict('SMP0007')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
						  	</el-select>
						  </el-form-item>
						</el-col> -->
					
						
						
						<!-- <el-col :span="8">
							<el-form-item label="申请人:" >
								 <el-input v-model="query.body.applyUser"></el-input>
								<el-select v-model="query.body.applyUser" style="width: 100%" filterable remote reserve-keyword placeholder="申请人" :remote-method="getUsers" >
									<el-option v-for="item in userList" :key="item.userName" :label="item.userChineseName" :value="item.userName">
										<span style="float: left;margin-left: 3px;">{{ item.userChineseName }}</span>
										<span style="float: right;margin-right: 3px;">{{ item.department }}</span>
									</el-option>
								</el-select>
							</el-form-item>
						</el-col> -->
						
					<!-- 	<el-col :span="8">
							
							<el-form-item label="申请日期:" prop="applyDateState">
								<el-col :span="11">
								<el-date-picker style="width: 100%" v-model="query.body.applyDateStart" type="date" placeholder="选择日期">
								</el-date-picker>
								</el-col>
								<el-col class="line" :span="2">-</el-col>
								<el-col :span="11">
								<el-date-picker style="width: 100%" v-model="query.body.applyDateEnd" type="date" placeholder="选择日期">
								</el-date-picker>
								</el-col>
							</el-form-item>
						</el-col> -->
						
						<el-col :span="8">
						  
						  <el-form-item label="工单状态:" >
						  	<el-select v-model="query.body.status" style="width: 100%" placeholder="工单状态" >
						  		<el-option v-for="item in dict('SMP0012')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
						  	</el-select>
						  </el-form-item>
						</el-col> 
					<el-col :span="8">
						<el-form-item style="text-align: right; margin-right: 30px;">
							<el-button size="mini" type="primary" @click="onSubmit" style="width: 80px;" >查&nbsp;询</el-button>
							<el-button size="mini" @click="reset" style="width: 80px;">重&nbsp;置</el-button>
						</el-form-item>
					</el-col>
				</el-col>
				
			</el-row>
			
			
			
		</el-form>
	</div>
	
	 <div class="smp-result">
		<el-table :data="list" size="mini" stripe border  style="width: 100%">
			<el-table-column prop="id" label="工单编号" width="300">
			</el-table-column>
			<el-table-column prop="qmsNo" label="需求编号" width="300">
			</el-table-column>
			<el-table-column prop="qmsName" label="需求名称">
			</el-table-column>
	
			<el-table-column prop="applyDate" label="申请日期" width="200" align="center">
			</el-table-column>
	
			<!-- <el-table-column prop="applyUser" label="申请人" width="200" align="center">
				<template slot-scope="scope">
					{{scope.row.applyUser|getUserChinesName}}
				</template>
			</el-table-column> -->
	
			<el-table-column prop="applyType" label="工单类型" width="200" align="center">
				 <template slot-scope="scope">
					{{scope.row.applyType|dictName("SMP0009")}}
				</template> 
			</el-table-column>
			
			<el-table-column prop="status" label="工单状态" width="200" align="center">
				 <template slot-scope="scope">
				 	{{scope.row.status|dictName("SMP0012")}}
				</template> 
			</el-table-column>
			
			<el-table-column  label="操作"
			      align="center" width="150">
				<template slot-scope="scope">
				       <el-link 
				         size="mini"
						 type="primary"
						 :underline="false"
						 style="font-size: 12px;"
				         @click="handleEdit(scope.$index, scope.row)">详情</el-link>
				    
				     </template>  
			</el-table-column>
			 
		</el-table>
	
	</div> 
	
	
	<div class="smp-pagination" v-show="total>0">
		<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper" :page-size="query.pageSize" :page-sizes="[5,10,15,20]" :total="total" :current-page="query.pageNum" @current-change = "currentChange" @size-change="sizeChange">
		</el-pagination>
	
	</div>
	
	<!-- <el-dialog
	  title="任务处理"
	  :visible.sync="dialogVisible"
	  width="30%"
	  :center="false"
	  :before-close="handleClose">
	   <div slot="title" class="dialog-header-title">
	          <i class="el-icon-s-promotion"></i>
	          <span>任务处理</span>
	        </div>
	  
	  <span>这是一段信息</span>
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
	    <el-button type="primary" @click="dialogVisible = false" size="mini">确 定</el-button>
	  </span>
	</el-dialog> -->
	
	
</div>
</template>

<script>
	"use strict";
	import {getDemandByPage} from '@/api/demand.js';
	
	export default {
		data() {
			return {
				total:0,
					title: '需求列表',
					expand: false,
					columns: [{
							title: '序号',
							dataIndex: 'id',
							align: 'center'
						},
						{
							title: '需求号',
							dataIndex: 'qmsNo',
							align: 'center'
						},
						{
							title: '需求名称',
							dataIndex: 'qmsName',
							align: 'center'
						},
						{
							title: '需求类型',
							dataIndex: 'qmsType',
							align: 'center',
							scopedSlots: { customRender: 'qmsType' }
						},
						{
							title: '需求状态',
							dataIndex: 'status',
							align: 'center',
							scopedSlots: { customRender: 'status' }
						},
						{
							title: '主系统',
							dataIndex: 'mainSystemNo',
							align: 'center'
						},
						{
							title: '申请人',
							dataIndex: 'applyUser',
							align: 'center'
						},
						{
							title: '当前处理人',
							dataIndex: 'curUser',
							align: 'center'
						},
						{
							title: '申请时间',
							dataIndex: 'appltDate',
							align: 'center'
						},
						
					],
					list: [],
					
					query: {
						body:{
							id:'',
							qmsNo:'',
							qmsName:'',
							mainSystemNo:'',
							qmsType:'',
							applyUser:'',
							applyDateStart:'',
							applyDateEnd:'',
							status:'',
							processId:'',
						},
						pageNum: 1,
						pageSize: 5
					},
					showVisible: false,
					record: {}
				
			};
	
	
	
		},
		created() {
			this.query.body.applyUser = this.$store.getters.getActiveUser().userName;
			this.getList()
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
	
			onSubmit() {
				this.getList();
			},
	
			handleClick() {
				this.dialogVisible = true;
			},
			
			handleEdit(index,row){
				this.$router.push({name: 'mydemandDetails',query: Object.assign(row)})
			},
	
	
			getUserList(query) {
			
			},
			
			getrequireList(query) {
			},
	
			reset() {
				this.query.body =   {
					}
			},
			
			getList() {
				getDemandByPage(this.query).then(response => {
					this.list = response.data.extend.list
					this.total = response.data.extend.total;
					
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
			
			currentChange(val){
				this.query.pageNum = val;
				this.getList();
			},
			sizeChange(val){
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getList();
			}
			

		}
	}
</script>

<style>
</style>
